<template>
	<view class="fun-flex-col page">
		<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" :style="{height: (windosHeight - 32) + 'px'}">
			<view class="fun-flex-col fun-justify-start list" v-for="item in newsData" :key="item.id" @click="toDetail(item)">
				<image class="image_5" :src="item.indexImgBlobUrl" :webp='true'/>
				<view class="title">{{item.title}}</view>	
				<view class="font_2">{{item.desc}}</view>
				<view class="fun-mt-4 fun-flex-row fun-justify-between fun-items-center">
					<text class="font_3">{{UTILS.setDateFormat(item.pubTime)}}</text>
					<text class="font_4">Learn More</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {newsList} from "@/api/more.js"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					classId:1,
					timeZone:8
				},
				newsData:[]
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			this.queryData.timeZone = this.UTILS.getTimeZone();
			this.getNewsList()
		},

		methods: {
			getNewsList(){
				newsList(this.queryData).then(res => {
					if(res.code == 0){
						this.newsData = this.newsData?.concat(res?.data|| []) || [];
						if(this.newsData?.length){
							this.newsData.forEach(ele => {
								
								// let imgUrl = this.urlToBlo(ele.indexImgUrl)
								// this.$set(ele,"indexImgBlobUrl", imgUrl)
								
								// console.log(urlToBlob,"urlToBloburlToBlob")
								// this.urlToBase64(ele.indexImgUrl).then(res => {
								//   // 转化后的base64图片地址
								//   console.log('base64', res)
								// })
								// console.log(urlToBlob,"urlToBloburlToBlob")
								// this.$set(ele,"indexImgBlobUrl", urlToBlob)
								
								uni.downloadFile({
								  url: ele.indexImgUrl,
								  success: (res) => {
								    var filePath = res.tempFilePath;
									this.$set(ele,"indexImgBlobUrl",filePath)
									console.log(res,"resres")
								  }
								});
							})
						}
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			urlToBase64(url) {
				return new Promise ((resolve,reject) => {
					let image = new Image();
					image.onload = function() {
					  let canvas = document.createElement('canvas');
					  canvas.width = 200;
					  canvas.height = 300;
					  // 将图片插入画布并开始绘制
					  canvas.getContext('2d').drawImage(image, 0, 0);
					  // result
					  let result = canvas.toDataURL('image/png')
					  resolve(result);
					};
					// CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
					image.setAttribute("crossOrigin",'Anonymous');
					image.src = url;
					// 图片加载失败的错误处理
					image.onerror = () => {
					  reject(new Error('urlToBase64 error'));
					};
				})
			},
			
			async urlToBlo(url){
			  const response = await fetch(url); // 获取文件内容
			  console.log(response,"responseresponse")
			  const blob = await response.blob(); // 转成 blob
			  console.log(blob,"blobblob")
			  // return blob;
			  this.getObjectURL(blob)
			},
			
			getObjectURL(file) {
			    var url = null;
			    if (window.createObjectURL != undefined) {
			        url = window.createObjectURL(file);
			    } else if (window.URL != undefined) {
			        url = window.URL.createObjectURL(file);
			    } else if (window.webkitURL != undefined) {
			        url = window.webkitURL.createObjectURL(file);
			    }
				console.log(url,"urlurl")
			    return url;
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.newsData.length) {
					this.queryData.page++;
					this.getNewsList();
				}
			},
			toDetail(item){
				uni.navigateTo({url:'/pages/more/insightDetail?newsId='+encodeURIComponent(item.id)})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 32rpx;

		.list {
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #D9D9D9;
			.image_5 {
				width: 100%;
				height: 264rpx;
			}
			.title{
				font-weight: bold;
				font-size: 16px;
				color: #1D1E25;
				margin: 20rpx 0;
			}
			.font_2 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #666666;
			}
			.font_3 {
				font-size: 24rpx;
				font-family: Inter;
				color: #7f7f7f;
			}
			
			.font_4 {
				font-size: 28rpx;
				font-family: Inter;
				font-weight: 600;
				color: #2a85ff;
			}
		}
	}
</style>